<template>
  <div id="shopImg">
    <div class="tip">
      <div class="text">提示</div>
      <div class="img-tip">
        <ul>
          <li>商品主图最少发布
            <em>3</em>张，最多可发布
            <em>5</em> 张</li>
          <li>颜色图片可不上传</li>
          <li>支持格式：*.tbi;*.png;.bmp;*.jpeg;*.jpg;*.gif</li>
          <li>
            图片尺寸
            <em>800*800</em>（像素）
          </li>
        </ul>
      </div>
    </div>
    <!-- 商品主图的图片上传 -->
    <w-panel-wrap>
      <w-panel-title :title="'商品主图'"></w-panel-title>
      <w-panel>
        <div class="showImg">
          <div class="main-img clearfix">
            <div class="center fl" v-for="(img, index) in isShow">
              <!-- 如果已经上传过的图片，则更新 -->
              <div class="mainItem" v-show="img">
                <img ref="preview" class="imgW" :src="imgloors.photos[index]">
                <div class="updateBtn">
                    <div class="mainItem imgW">
                      <form class="form" :id="`form${index}`" enctype="multipart/form-data" method="post" :action="imgUploadUrl" v-if="index == 0">
                        <!-- 上传按钮 -->
                        <h3 v-if="index == 0" class="ma-h3">主图</h3>
                        <label class="up-single-upload-wrap" :for="`mainImgFile${index}`">
                          更新图片
                          <input type="file" name="imgFile" :id="`mainImgFile${index}`" @change="uploadImg(null, img, index, index, 111)">
                        </label>
                        <!-- 登录信息 -->
                        <input type="hidden" :value="$store.getters.token" name="accessToken">
                        <!-- 当前类型：main:主图 -->
                        <input type="hidden" :value="imgloors.value[index]" name="uploadType">
                        <input type="hidden" :value="oldFileName[index] || photoMain" name="oldFileName">
                        <!-- 商品id -->
                        <input type="hidden" :value="$store.getters.goodsId  || $route.params.gdId" name="goodsId">
                        <input type="hidden" :value="$store.getters.storeId" name="storeId">
                      </form>
                      <div class="delete-img-icon"  v-if="index != 0" @click="deleteImgIcon($store.getters.goodsId, $store.getters.storeId, imgloors.value[index], oldFileName[index], '', index)"></div>
                    </div>
                </div>
              </div>
              <!-- 直接上传主图图片 -->
              <div class="mainItem imgW" v-show="!img">
                <form class="form" :id="`form${imgloors.val[index]}`" enctype="multipart/form-data" method="post" :action="imgUploadUrl">
                  <!-- 上传按钮 -->
                  <label class="single-upload-wrap" :for="`mainImgFile${imgloors.val[index]}`">
                    <input type="file" name="imgFile" :id="`mainImgFile${imgloors.val[index]}`" @change="uploadImg(null, img, imgloors.val[index], index)">
                  </label>
                  <!-- 登录信息 -->
                  <input type="hidden" :value="$store.getters.token" name="accessToken">
                  <!-- 当前类型：main:主图 -->
                  <input type="hidden" :value="imgloors.value[index]" name="uploadType">
                  <input type="hidden" value="" name="oldFileName">
                  <!-- 商品id -->
                  <input type="hidden" :value="$store.getters.goodsId || $route.params.gdId" name="goodsId">
                  <input type="hidden" :value="$store.getters.storeId" name="storeId">
                </form>
              </div>
            </div>
          </div>
        </div>
      </w-panel>
    </w-panel-wrap>
    <!-- 上传颜色规格的图片 -->
    <w-panel-wrap>
      <w-panel-title :title="'颜色图片'"></w-panel-title>
      <w-panel>
        <div class="main-img color-b" v-for="(item, key) in goodsDetailsList" :key="key">
          <div class="center">
            <div class="colorList"> 
              <span>{{item.specpropertyName}}</span>
              <!-- 直接上传图片 -->
              <div class="mainItem" v-if="!item.specpropertyPhotoPath">
                <div class="imgW">
                  <form class="form" :id="`form_${item.specpropertyId}`" enctype="multipart/form-data" method="post" :action="imgUploadUrl">
                    <label class="single-upload-wrap" :for="`mainImgFiles${key}`">
                      <input type="file" name="imgFile" :id="`mainImgFiles${key}`" @change="uploadImg(item)">
                    </label>
                    <input type="hidden" :value="item.specpropertyId" name="specpropertyId">
                    <input type="hidden" :value="$store.getters.token" name="accessToken">
                    <input type="hidden" value="gsp" name="uploadType">
                    <input type="hidden" value="" name="oldFileName">
                    <input type="hidden" :value="$store.getters.goodsId  || $route.params.gdId" name="goodsId">
                    <input type="hidden" :value="$store.getters.storeId" name="storeId">
                    <input type="hidden" :value="item.specpropertyName" name="specpropertyName">
                  </form>
                </div>
              </div>
              <!-- 更新已经上传的图片 -->
              <div class="mainItem" v-else>
                <div class="imgW">
                  <img ref="preview" class="img-preview" :src="item.specpropertyPhotoPath + item.specpropertyPhotoUrl" v-if="item.specpropertyPhotoUrl && item.specpropertyPhotoPath && item.specpropertyPhotoPath.substr(-4, 4) != '.png' && item.specpropertyPhotoPath.substr(-4, 4) != '.jpg' && item.specpropertyPhotoPath.substr(-5, 5) != '.jepg'">
                  <img ref="preview" class="img-preview" :src="item.specpropertyPhotoPath" v-else>
                </div>
                <form class="form">
                   <div class="delete-img-icon" @click="deleteImgIcon($store.getters.goodsId, $store.getters.storeId, 'gsp', '', item.specpropertyId, '' , item)"></div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </w-panel>
    </w-panel-wrap>
    <div style="margin:35px 0;">
      <button class="btn main" @click="onPrev">上一步</button>
      <button class="btn main" @click="onNext">下一步</button>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { session } from 'js/util'
import { imgUploadUrl } from 'js/config'
import { apiGoods } from '../../../common/api'
import app from '../../../main'

export default {
  data() {
    return {
      oldFileName: ['', '', '', '', ''],
      imgsrc: '',
      isShow: [0],
      imgloors: {
        photos: ['', '', '', '', ''],
        value: ['main', 'info', 'info', 'info', 'info'],
        val: [6, 7, 8, 9, 11]
      },
      imgUploadUrl: imgUploadUrl
    }
  },
  computed: {
    ...mapGetters(['goodsDetailsList', 'photoInfo', 'photoInfoUrl', 'photoMainUrl', 'photoMain'])
  },
  methods: {
    /**
     * 上传图片
     * @param  {Object} item 当前操作的sku值
     * item有值表示是sku属性 item没值表示是商品主图
     */
    uploadImg(item, isShows, num, numb, key) {
      let _this = this
      let id = ''
      if (!item && item == null) {
        id = 'form' + num
      } else {
        id = `form_${item.specpropertyId}`
      }
      $('#' + id).ajaxSubmit({
        success(resp) {
          if (resp.code == 200) {
            _this.$set(_this.isShow, numb, 1)
            if (item == null) {
              _this.imgloors.photos[numb] = resp.data.photoUrl
              _this.$set(_this.oldFileName, numb, (resp.data.oldFileName))
              if (_this.isShow.length < 5 && !key) {
                _this.isShow.push(0)
              }
            } else {
              _this.$set(item, 'specpropertyPhotoPath', resp.data.photoUrl)
              _this.$set(item, 'specpropertyPhoto', resp.data.photoAccessId)
              _this.$set(item, 'oldFileNameGsp', (resp.data.photoUrl).split('/')[(resp.data.photoUrl).split('/').length - 1])
            }
          }
        },
        error(resp) {
        }
      })
    },
    onPrev() {
      this.$store.commit('intoThisPage', 1)
      let index = this.$parent.$parent.curIndex
      if (index == 0) {
        this.$router.go(-1)
      } else {
        this.$parent.$parent.onChangeContent(index - 1)
      }
    },
    onNext() {
      let paramKey = true
      if (this.goodsDetailsList.length > 0) {
        this.goodsDetailsList.forEach(function(colorSpesc, index) {
          if (!colorSpesc.specpropertyPhotoPath) {
            app.$toast('颜色图片必传')
            paramKey = false
            return
          }
        })
      }
      if (!paramKey) {
        return
      }
      if (this.isShow.length >= 5) {
        if (typeof (this.$route.params.gdId) == 'undefined') {
          this.$store.commit('intoThisPage', 1)
        }
      } else {
        app.$toast('主图必填五张')
        return
      }
      let index = this.$parent.$parent.curIndex
      this.$parent.$parent.onChangeContent(index + 1)
    },
    deleteImgIcon(goodsId, storeId, classify, oldFileName, specpropertyId, key, item) {
      let oldName = ''
      let _this = this
      if (specpropertyId && specpropertyId != '') {
        oldName = ''
      } else {
        if (oldFileName && oldFileName != undefined) {
          oldName = oldFileName
        } else {
          oldName = JSON.parse(this.photoInfo)[key - 1]
        }
      }
      if (this.$route.params.gdId) {
        goodsId = this.$route.params.gdId
      }
      let data = {
        goodsId: goodsId,
        storeId: storeId,
        uploadType: classify,
        oldFileName: oldName,
        specpropertyId: specpropertyId
      }
      apiGoods.deleteGoodsImg(data).then((resp) => {
        if (specpropertyId && specpropertyId != '') {
          _this.$set(item, 'specpropertyPhotoPath', '')
        } else {
          if (key) {
            _this.isShow.splice(key, 1)
            _this.imgloors.photos.splice(key, 1)
            _this.oldFileName.splice(key, 1)
            if (key == 4) {
              _this.isShow.push(0)
            }
            if (key != 4 && _this.isShow.length == 4) {
              _this.isShow.push(0)
            }
            let i = 0
            _this.isShow.forEach(function(element, index) {
              if (element == 0) {
                i++
              }
              if (i > 1) {
                _this.isShow.splice(index, 1)
              }
            })
          }
        }
      })
    }
  },
  created() {
    setTimeout(() => {
      let _this = this
      if (_this.photoMain && _this.photoMain != '') {
        _this.$set(_this.isShow, 0, 1)
        _this.$set(_this.imgloors.photos, 0, _this.photoMainUrl + _this.photoMain)
        if (_this.photoInfo.length <= 0) {
          _this.isShow.push(0)
        }
      }
      if (_this.photoInfo && _this.photoInfo.length > 0) {
        JSON.parse(_this.photoInfo).forEach((v, key) => {
          _this.$set(_this.isShow, key + 1, 1)
          _this.$set(_this.imgloors.photos, key + 1, this.photoInfoUrl + v)
        })
        if (JSON.parse(_this.photoInfo).length < 4) {
          _this.isShow.push(0)
        }
      }
    }, 1000)
  }
}
</script>
<style lang="scss">
#shopImg {
  .img-preview-gpg {
    width: 108px;
    height: 108px;
    position: relative;
    top: 108px;
    z-index: 9;
  }

  .tip {
    position: relative;
    div {
      display: inline-block;
    }
    .text {
      position: absolute;
      top: 20;
      left: 10px;
    }
    background-color: #E6E6E6;
    margin-top: 20px;
    padding: 19px 0;
    .img-tip {
      margin-left: 131px;
      ul {
        list-style: decimal;
      }
      li {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 10px;
        color: #999;
        em {
          color: RGB(255, 126, 0);
        }
      }
    }
  }
  .pannel {
    padding: 0;
  }
  .showImg {
    padding: 30px;
  }
  .main-img {
    .mainItem {
      margin-right: 30px;
      display: inline-block;
      vertical-align: top;
      button {
        margin-top: 20px;
        color: #F20685;
        line-height: 18px;
        font-size: 14px;
        border: 1px solid;
        background-color: #fff;
      }
      .delete-img-icon {
        background-image: url('../../../assets/delete-img-icon.png');
        background-position: center;
        background-repeat: no-repeat;
        width: 30px;
        height: 30px;
        margin: 20px auto;
        background-size: 100%;
      }
      .single-button {
        display: block;
        position: relative;
        width: 100px;
        height: 30px;
        border-radius: 3px;
        border: 1px solid;
        color: #F20685;
        text-align: center;
        margin-top: 20px;
        input {
          width: 0;
          height: 0;
          opacity: 0;
        }
        .img-preview {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #fff;
        }
      }
      .ma-h3 {
        width: 90px;
        text-align: center;
        margin-top: 5px;
      }
      .up-single-upload-wrap {
        position: relative;
        display: block;
        height: 30px;
        border-radius: 4px;
        width: 90px;
        top: 10px;
        left: 5px;
        line-height: 28px;
        color: #F20685;
        text-align: center;
        border: 1px solid #F20685;
        text-align: center;
        background-color: #fff;
        cursor: pointer;
        .img-preview {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #fff;
        }
        input {
          width: 0;
          height: 0;
          opacity: 0;
        }
      }
      .single-upload-wrap {
        position: relative;
        display: block; // border-radius: 4px;
        height: 110px;
        width: 110px;
        border: 1px solid #ddd;
        text-align: center;
        background-color: #fff;
        background-image: url('../../../assets/icon-upload.png'); // background-image: url();
        background-repeat: no-repeat;
        background-position: center center;
        background-size: none;
        cursor: pointer;
        .img-preview {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #fff;
        }
        &.disabled {
          cursor: default;
          background-size: none;
          background-repeat: no-repeat;
          background-position: center center;
          background-image: url('../../../assets/icon-upload.png'); // background-image: url();
        }
        input {
          width: 0;
          height: 0;
          opacity: 0;
        }
      }
    }
    .imgW {
      height: 110px;
      width: 110px;
    }
    .colorList {
      margin-bottom: 25px;
      span {
        display: inline-block;
        width: 100px;
        text-align: right;
      }
      .mainItem {
        vertical-align: middle;
        margin-left: 39px;
      }
    }
  }
  .color-b {
    border: 1px solid #f7f7f7;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .tab-img {
    .nav {
      height: 31px;
      background: #f7f7f7;
      li {
        float: left;
        width: 116px;
        height: 31px;
        text-align: center;
        line-height: 31px;
        cursor: pointer;
        &.actived {
          background: #fff;
        }
      }
    }
  }
  .delete-form {
    position: relative;
  }
  .delete-form {
    position: absolute;
    z-index: 111;
    top: 100px;
    left: 39px;
  }
}
</style>